import { defineComponent, computed } from "vue";
import { 
  CheckCircleIcon,
  InformationCircleIcon,
  XCircleIcon,
} from "@heroicons/vue/20/solid";

export default defineComponent({
  name: "LToast",
  props: [
    "type",
    "content",
    "index",
  ],
  setup(props) {

    let icon = null;

    switch(props.type) {
    case "success":
      icon = <CheckCircleIcon />;
      break;
    case "info":
      icon = <InformationCircleIcon />;
      break;
    case "error":
      icon = <XCircleIcon />;
      break;
    default:
      icon = <InformationCircleIcon />;
      break;
    }

    return () => {
      const classNames = ["w-4"];
      switch(props.type) {
      case "success":
        classNames.push("text-green-500");
        break;
      case "info":
        classNames.push("text-blue-500");
        break;
      case "error":
        classNames.push("text-red-500");
        break;    
      }

      const positionTop = computed(() => {
        return 3.2 * (props.index + 1) + "rem";
      });
      return (
        // <div class="flex absolute justify-center w-full h-12 transition-all duration-75" style={`top:${positionTop.value}`}>
        //   <div class="w-fit h-12 bg-white rounded-lg shadow-md flex items-center pl-2 pr-2">
        //     <div class={classNames}>
        //       {icon}
        //     </div>
        //     <div class="flex items-center ml-1">{ props.content }</div>
        //   </div>
        // </div>
        <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-fit h-12 bg-white rounded-lg shadow-md flex items-center pl-2 pr-2" style={`top:${positionTop.value}`}>
          <div class={classNames}>
            {icon}
          </div>
          <div class="flex items-center ml-1">{ props.content }</div>
        </div>
      );
    };
  },
});